<template>
  <a-modal
    title="选择用户"
    :width="800"
    :height="500"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div class="mb20">
      <a-tag
        v-for="item in selectedRows"
        :key="item.userId"
        closable
        @close.stop="e => tagClose(e, item)"
      >{{ item.name }}</a-tag>
    </div>
    <a-row :gutter="24" class="dept-modal-row">
      <a-col :span="8">
        <x-tree ref="setTree" :treeData="treeData" @changeTree="handleChangeTree" />
        <!-- <x-tree ref="setTree" @treeCheck="handleTreeCheck" :treeData="treeData" /> -->
      </a-col>
      <a-col :span="16">
        <a-table
          :scroll="{ y: 445 }"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: tableType }"
          :loading="loading"
          :columns="columns"
          :pagination="false"
          :dataSource="tableData"
          bordered
          :rowKey="record => record.username"
        >
          <span slot="state" slot-scope="text, record">
            <a-tag color="green" v-if="record.state === 0">正常</a-tag>
            <a-tag color="red" v-else>禁用</a-tag>
          </span>
        </a-table>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import XTree from '@/components/XTree'
import { getDeptTree } from '@/api/department'
import { queryDeptUserList } from '@/api/department'

export default {
  props: {
    // 表格单选/多选
    tableType: {
      type: String,
      default: 'radio'
    }
  },
  components: {
    XTree
  },
  data() {
    return {
      form: this.$form.createForm(this),
      treeData: [],
      visible: false,
      confirmLoading: false,
      mdl: {},
      loading: false,
      // 查询参数
      queryParam: {
        id: '',
        pageNo: 1,
        pageSize: 10
      },
      // 表头
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '手机号',
          width: '120px',
          dataIndex: 'phone'
        },
        {
          title: '所属部门岗位',
          dataIndex: 'deptName',
          align: 'center'
        },
        {
          title: '状态',
          width: '80px',
          align: 'center',
          scopedSlots: { customRender: 'state' }
        }
      ],
      tableData: [],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created() {
    this.getDeptTree()
    this.getDeptList()
  },
  methods: {
    edit() {
      this.visible = true
    },
    tagClose(e, item) {
      console.log(e, item)
      const index = this.selectedRows.findIndex(v => v.userId === item.userId)
      this.selectedRows.splice(index, 1)
      this.selectedRowKeys.splice(index, 1)
    },
    async handleOk() {
      console.log(this.selectedRows)
      console.log('handleok')
      // this.$emit('postData', this.selectedRows)
    },
    handleCancel() {
      this.visible = false
    },
    getDeptTree() {
      getDeptTree().then(res => {
        console.log('tree res', res)
        this.treeData = res.data
      })
    },
    handleChangeTree(obj) {
      this.getId(obj)
    },
    // 表格方法
    getId(obj) {
      this.queryParam.id = obj.parentId
      this.getDeptList()
    },
    async getDeptList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await queryDeptUserList(this.queryParam)
      const {
        state,
        data: { records }
      } = res
      this.tableData = records
      //   this.pagination.total = total
      this.loading = false
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows)
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>
